<script lang="ts" setup>
import { ref, watch } from 'vue'
import { publishShopGoodsCategoryListGet } from '@/api'
import type { OPublishShopGoodsCategoryListGetItem } from '@/typed/response'

interface IProps {
	value?: any;
	width?: number | string;
	placeholder?: string;
}

const emit = defineEmits(['update:value'])
const props = withDefaults(defineProps<IProps>(), {
	width: 120,
	value: undefined,
	placeholder: '商品分类'
})
const val = ref<any>()
const loading = ref(false)
const list = ref<OPublishShopGoodsCategoryListGetItem[]>([])

watch(() => props.value, () => {
	val.value = props.value
})

function onChange(value: any) {
	emit('update:value', value)
}

async function getList(show: boolean) {
	if (show && list.value.length === 0) {
		loading.value = true;
		const {data} = await publishShopGoodsCategoryListGet()
		if (data) {
			list.value = data;
		}
		loading.value = false;
	}
}
</script>

<template>
	<n-tree-select
		v-model:value="val"
		:consistent-menu-width="false"
		:loading="loading"
		:options="list"
		label-field="name"
		value-field="id"
		key-field="id"
		clearable
		:placeholder="placeholder"
		:style="{width:width+'px'}"
		@update-value="onChange"
		@update-show="getList"
	>
		<template #action>
			<div class="action">
				<n-button dashed block size="small">
					编辑分类
				</n-button>
			</div>
		</template>
	</n-tree-select>
</template>

<style lang="less" scoped>
</style>
